<template>
  <div class="banner-box ui-center ui-flex">
    <div class="left flex-1">
      <div class="title">
        所谓民族走廊，是指一定的民族或族群长期沿着一定的自然环境如河流或山脉向外迁徙或流动的路线在这条走廊中必然保留着该民族或族群众多的历史与文化的沉淀。
      </div>
      <div class="text">“走廊”是费孝通在1980年前后提出的一个集合了历史内涵与地理特征的分析概念。</div>
      <div class="text">
        1982年12月，他在中央民族学院民族研究所座谈会上谈道，“我们需要一个宏观的、全面的、整体的观念，看中国民族大家庭里的各个成分在历史上是怎样运动的”“一条西北走廊，一条藏彝走廊，一条南岭走廊，还有一个地区包括东北几省，倘若这样来看，中华民族差不多就有一个全面的概念了”。
      </div>
      <div class="text">
        他认为，“对这些走廊展开文献和实地田野考察，民族研究者能够看到民族之间文化交流的历史，从而能对中华民族的内部多样性有一个比较生动的认识。目前的民族走廊研究包括了藏彝走廊、河西走廊、南岭走廊、苗疆走廊等走廊地带的研究。
      </div>
    </div>
    <div class="right">
      <img class="banner" src="../../../assets/list/nature-banner.png" alt="" />
    </div>
  </div>
  <img class="bg" src="../../../assets/list/nature-bg.png" alt="" />
  <div class="map-box ui-flex ui-center">
    <div class="left">
      <div class="item" v-for="(item, index) in imgList" :key="index">
        <div class="img-box" @click="ChangeImg(item)">
          <img :src="item.url" />
        </div>
        <div class="text" @click="Jump">{{ item.title }}</div>
      </div>
    </div>
    <div class="right flex-1">
      <div class="img-box" @click="Jump">
        <img :src="currentImg.url" />
        <div class="more-mask">
          <div class="more">查看更多</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import img1 from '../../../assets/mock/banner-intro.png';
import img2 from '../../../assets/mock/map-2.jpg';
import img3 from '../../../assets/mock/map-3.jpg';
import img4 from '../../../assets/mock/map-4.jpg';

const { router } = inject('global');

let imgList = ref([
    {
      url: img1,
      title: '藏彝走廊',
      subjectId: 1
    },
    {
      url: img2,
      title: '河西走廊',
      subjectId: 2
    },
    {
      url: img3,
      title: '南岭走廊',
      subjectId: 3
    },
    {
      url: img4,
      title: '苗疆走廊',
      subjectId: 4
    }
  ]),
  currentImg = reactive({});
const ChangeImg = data => {
  currentImg = Object.assign(currentImg, data);
};
const Jump = () => {
  router.push('/listSpaceList?subjectId=' + currentImg.subjectId);
};

onMounted(() => {
  ChangeImg(imgList.value[0]);
});
</script>

<style lang="scss" scoped>
.banner-box {
  padding: 30px 0 0 0;
  .left {
    flex: 1;
    min-width: 0;
    .title {
      font-size: 20px;
      line-height: 42px;
      color: #000000;
      text-decoration: underline;
      padding-bottom: 13px;
    }
    .text {
      font-size: 14px;
      color: #000000;
      line-height: 24px;
      padding: 10px 0 0 0;
    }
  }
  .right {
    width: 567.11px;
    height: 316.97px;
    border: 2px solid #ff3232;
    margin: 13px 0 0 52px;
    flex-shrink: 0;
    .banner {
      width: 567.11px;
      height: 315.26px;
      transform: translate(-13px, -13px);
    }
  }
}
.bg {
  width: 100%;
  height: 267px;
  object-fit: cover;
  margin: 29px 0 34px 0;
}
.map-box {
  .left {
    width: 200px;
    .item {
      margin-bottom: 31px;
      cursor: pointer;
      .img-box {
        height: 148px;
        border: 1px solid #9c2c29;
        padding: 2px;
        background-color: #fff;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .text {
        font-size: 16px;
        color: #000000;
        line-height: 23px;
        padding: 10px 0;
        text-align: center;
      }
    }
  }
  .right {
    min-width: 0;
    margin-left: 30px;
    .img-box {
      cursor: pointer;
      height: 855px;
      border: 1px solid #9c2c29;
      padding: 12px;
      background-color: #fff;
      position: relative;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .more-mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        .more {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          display: flex;
          align-items: center;
          font-size: 24px;
          color: #f6d1bf;
          line-height: 35px;
          &::after {
            content: '';
            display: block;
            width: 34px;
            height: 47px;
            @include bgImg('@/assets/list/more.png');
            margin-left: 20px;
          }
        }
      }
    }
  }
}
</style>
